import { CloseOutlined } from "@ant-design/icons";
import React, { CSSProperties } from "react";
import ReactDOM from "react-dom";

export type PopupProps = {
    open?: boolean;
    onClose?: () => void;
    width?: string;
    height?: string;
    className?: string;
    rootClassName?: string;
    title?: React.ReactNode;
    children?: React.ReactNode;
    closeable?: boolean;
    style?: CSSProperties;
    destoryAfterClose?: boolean;
}

function Popup({
    title = null,
    open = false,
    children,
    className = '',
    rootClassName = '',
    onClose,
    closeable = true,
    style = {},
}: PopupProps) {

    return ReactDOM.createPortal(<div
            className={`
                fixed top-0 w-screen h-screen inset-0 z-[1000] pointer-events-auto bg-[#00000080] transition-[left]
                ${rootClassName || ''} ${open ? 'left-0' : 'left-[calc(100%+100px)]'}
            `}
            onClick={onClose}
        >
            <div
                className={`
                    ${className || ''}
                    absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white
                    flex flex-col max-h-screen
                `}
                onClick={(event) => event.stopPropagation()}
                style={style}
            >
                {
                    closeable
                        ? <div className="absolute top-2 right-4 text-lg flex items-center justify-center h-8 w-8 rounded cursor-pointer hover:bg-gray-100" onClick={onClose}>
                            <CloseOutlined />
                        </div>
                        : <></>
                }
                {
                    title
                        ? <div className="text-left p-4 border-b">
                            <div>{title}</div>
                        </div>
                        : <></>
                }
                <div className="h-full overflow-y-auto">{children}</div>
            </div>
        </div>, document.body);
}

export default Popup;